<!-- 选择床号 -->
<template>
  <div class="bednumber-container">
    <div class="main" v-if="bednumberArrRef">
      <div
        class="box"
        v-for="item in bednumberArrRef"
        :key="item.id"
        @click="transmit(item)"
      >
        <Box :colorArr="['#7817e7', '#ba3ae2']">
          <div class="content">
            <div class="icon">
              <Icon type="bednumber"></Icon>
            </div>
            <p class="title">{{ item.bednumberId }}</p>
              <p class="people">以住之人: {{ item.StudentSInfon ? item.StudentSInfon.Nickname : "暂无"}}</p>
          </div>
        </Box>
      </div>
    </div>
  </div>
</template>

<script setup>
import Box from "@/components/Box/index.vue";
import Icon from "@/components/Icon/index.vue";
import { ref, onMounted } from "vue";
import { useCheckInStore } from "@/store/useCheckInStore.js";
import { storeToRefs } from "pinia";
const emit = defineEmits(["closeMasking"]);
const store = useCheckInStore();
const { getBednumberInfo, setBednumber } = store;
const { readCheckInfo } = storeToRefs(store);
const bednumberArrRef = ref([]) // 床位信息
// 获取床位信息
onMounted(async () => {
    bednumberArrRef.value = await getBednumberInfo({roomNoId:readCheckInfo.value.room.id})
})
// 选中床位
function transmit(item) {
    if(item.isPeople){
        ElMessage.error('该床位已经有人入住了')
        return
    }
    setBednumber(item);
  emit("closeMasking");
}
</script>

<style lang="less" scoped>
@import "./styles/Select.less";
.bednumber-container {
  width: 100%;
  height: 100%;
  .select();
}
</style>